<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/cocktailmixer.css" />
<script type="text/javascript" src="js/ajax_edit_cocktail.js"></script>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1>Cocktail erstellen</h1>
		</div>
		<jsp:include page="menu.jsp"></jsp:include>

		<div id="content">
			<c:if test="${issaved}"><span>Der Cocktail wurde gesichert: <a href="cocktails.html?id=${cocktailId}">${cocktailName}</a></span></c:if>
			<form method="post">
				<p>
					<span>Name:</span> <span><input id="new_cocktail_name" name="name" type="text">
					</span>
				</p>

				<p>
					<span>Alkoholisch: <input class="radio" name="alcoholic"
						type="checkbox" value=""> </span>
				
					<span>Typ:</span> <span> <select name="type">
							<c:forEach items="${types}" var="item">
								<option value="${item.id}">${item.name}</option>
							</c:forEach>
					</select> </span>
				</p>
				<p>Beschreibung:<br><textarea class="description" name="description"></textarea></p>
				<input type="submit" value="erstellen">

			</form>
			<h3>Zutaten</h3>
			<div id="ingredients">
				<c:forEach items="${ingredients}" var="item">
					<p id="ingr_${item.ingredient.id}"><span>${item.ingredient.name} Menge: ${item.getNeededAmount()} ${item.ingredient.unit} </span><span>
							<button type="button"
								onclick="removeIngredient(${item.ingredient.id});">entfernen</button>
					</span></p>
				</c:forEach>
			</div>
			<br><span> <select id="selectable_ingredients">
					<c:forEach items="${selectable_ingredients}" var="item">
						<option id="${item.id}">${item.name} - ${item.unit}</option>
					</c:forEach>
			</select> </span>
			<span><button type="button"	onclick="addIngredient();">hinzuf&uuml;gen</button></span>
			<br>
			<span>Menge: <input id="amount" type="text" value="0.0"></span>
		</div>
		<br class="clear-float" />
		<div id="footer">
			<a>Impressum</a>
		</div>
	</div>
</body>
</html>